<template>
  <el-aside :width="sideWith + 'px'" style="background-color: rgb(238, 241, 246);">
    <el-menu
        :default-openeds="['1', '2', '3', '4', '5', '6', '7']"
        style="min-height: 100%; overflow-x: hidden"
        background-color="rgb(48, 65, 86)"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse-transition="false"
        class="el-menu-v"
        :collapse="isCollapse"
    >
      <div style="width: 160px; line-height: 60px; text-align: center">
        <img src="../assets/logo.png" style="width: 20px; position: relative; margin-right: 5px; top: 5px" />
        <b style="color: white" v-show="logTextShow">后台管理系统</b>
      </div>

      <!-- 模块1：个人信息展示 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span slot="title">个人信息展示</span>
        </template>
        <el-menu-item index="1-1" @click="goToStuInfo">教师个人信息</el-menu-item>
      </el-submenu>

      <!-- 模块2：讨论社区 -->
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-chat"></i>
          <span slot="title">讨论社区</span>
        </template>
        <el-menu-item index="3-1" @click="goToTalk">讨论社区</el-menu-item>
      </el-submenu>

      <!-- 模块3：布置作业 -->
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-files"></i>
          <span slot="title">布置作业</span>
        </template>
        <el-menu-item index="2-1" @click="goToTAssignHomework">布置作业</el-menu-item>
      </el-submenu>


      <!-- 模块4：布置考试 -->
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-pie-chart"></i>
          <span slot="title">布置考试</span>
        </template>
        <el-menu-item index="4-1" @click="goToTAssignExam">布置考试</el-menu-item>
      </el-submenu>

      <!-- 模块5：已发布的作业详情 -->
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-refresh"></i>
          <span slot="title">已发布的作业详情</span>
        </template>
        <el-menu-item index="5-1" @click="goToTHomework">已发布的作业详情</el-menu-item>
      </el-submenu>

      <!-- 模块6：已发布的考试详情 -->
      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-book"></i>
          <span slot="title">已发布的考试详情</span>
        </template>
        <el-menu-item index="6-1" @click="goToTExam">已发布的考试详情</el-menu-item>
      </el-submenu>

      <!-- 模块7：SQL练习 -->
<!--      <el-submenu index="7">-->
<!--        <template slot="title">-->
<!--          <i class="el-icon-sql"></i>-->
<!--          <span slot="title">SQL练习</span>-->
<!--        </template>-->
<!--        <el-menu-item index="7-1">SQL练习</el-menu-item>-->
<!--      </el-submenu>-->

      <el-submenu index="7">
        <template slot="title">
          <i class="el-icon-book"></i>
          <span slot="title">学生列表</span>
        </template>
        <el-menu-item index="7-1" @click="goToTStudentList">学生列表</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: "Sidebar",
  data() {
    return {
      isCollapse: false,
      collapseBtnClass: "el-icon-s-fold",
      sideWith: 200,
      logTextShow: true,
    };
  },
  methods: {
    goToStuInfo() {
      this.$router.push({ path: "/Teacher_Info" }); // 跳转到教师个人信息页面
    },
    goToTalk() {
      this.$router.push({ path: "/post/post_Tea" }); // 跳转到讨论社区页面
    },
    goToTAssignHomework(){
      this.$router.push({ path: "/teacher/TAssignHomework" });  // 跳转到布置作业页面
    },
    goToTAssignExam(){
      this.$router.push({ path: "/teacher/TAssignExam" });  // 跳转到布置考试页面
    },
    goToTHomework(){
      this.$router.push({ path: "/teacher/THomework" });  // 跳转到布置作业页面
    },
    goToTExam(){
      this.$router.push({ path: "/teacher/TExam" });  // 跳转到布置考试页面
    },
    goToTStudentList(){
      this.$router.push({ path: "/teacher/StudentList" });
    }
  },
};
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>







